<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>06自定义js对象</title>
    </head>
    <body>

        <table border="1px">
            <caption>商品表格</caption>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品库存</th>
            </tr>
        </table>

        <script>
            //1.实例化一个自带属性与方法的对象
            let p1 = {
              name:'张三',
              age:18,
              say:function () {
                  console.log('hello,我是'+this.name);
              }  
            };
            console.log(p1);
            p1.say();

            //2.先定义一个空对象，在动态添加属性与方法
            let p2 = {};
            p2.name = '李四';
            p2.age = 20;
            p2.eat =function () {
                console.log(this.name+'正在吃');
            }
            console.log(p2);
            p2.eat();


            //3.定义一个数组，存放多个商品对象

            let productArr = [
                {title:"小米14",price:5400,num:200},
                {title:"华为Mate60Pro",price:6990,num:200},
                {title:"苹果15Pro",price:9800,num:1200},
                {title:"三星",price:4800,num:800},

                {title:"三星",price:4800,num:800},
                {title:"三星",price:4800,num:800},
                {title:"三星",price:4800,num:800},

            ];
            console.log(productArr);
            console.log(productArr[0]);

            let tableE = document.querySelector('table');
            //遍历上方的商品数组，有几件商品，创建几行表格数据
            for (let i=0;i<productArr.length;i++){
                let trE = document.createElement('tr');
                let titleTd =document.createElement('td');
                let priceTd =document.createElement('td');
                let numTd =document.createElement('td');
                //给创建出来的三个单元格赋值，当前遍历所有的商品的对应的属性值
                titleTd.innerHTML=productArr[i].title;
                priceTd.innerHTML=productArr[i].price;
                numTd.innerHTML=productArr[i].num;

                trE.append(titleTd,priceTd,numTd);
                tableE.append(trE);
            }


        </script>
    </body>
</html>